<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .btn {
        background-color: gold;
      }

      body {
        text-align: center;
      }

      table {
        width: 700px;
        margin: 10px auto;
        border-collapse: 0;
        border-spacing: 0;
      }

      th,
      td {
        border: 1px solid #000;
      }
    </style>
    <script src="./jquery.min.js"></script>
    <script src="./template-web.js"></script>
  </head>
  <body>
    <form action="#">
      <input type="text" placeholder="书名" id="name" />
      <input type="text" placeholder="作者" id="author" />
      <input type="text" placeholder="内容描述" id="des" />
      <button class="btn">提交</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>书名</th>
          <th>作者</th>
          <th>内容描述</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>西游记</td>
          <td>吴承恩</td>
          <td>西游大世界</td>
          <td>
            <a href="#">删除</a>
            <a href="#">修改</a>
          </td>
        </tr>
      </tbody>
    </table>

    <script type="html/text" id="tmp">
        {{each result}}
          <tr>
              <td>{{$value.id}}</td>
              <td class='name_'>{{$value.name}}</td>
              <td class='author_'>{{$value.author}}</td>
              <td class='des_'>{{$value.des}}</td>
              <td>
                <a href="#" dataId='{{$value.id}}' class="delBtn">删除</a>
               <a href="#" dataId='{{$value.id}}' class="editBtn">修改</a>
             </td>
          </tr>
          {{/each}}
    </script>

    <script type="html/text" id="tmp1">
      <form action="#" id='editBox'>
        <input type="text" id="editName" value='{{name}}'/>
        <input type="text" id="editAuthor" value='{{author}}'/>
        <input type="text" id="editDes" value='{{des}}'/>
        <button class="editSub" dataId='{{id}}'>修改提交</button>
      </form>
    </script>
    <script>
      $(() => {
        let baseUrl = "http://127.0.0.1:3000";
        let showConfirm = (str) => {
          return window.confirm(str);
        };
        let clearCon = () => {
          $("#name").val("");
          $("#author").val("");
          $("#des").val("");
        };

        let getBooks = async () => {
          let res = await $.ajax({ url: baseUrl + "/api/books" });
          let html = template("tmp", res);
          $("tbody").html(html);
        };
        getBooks();

        $("tbody").on("click", ".delBtn", async function () {
          let id = $(this).attr("dataid");
          let flag = showConfirm("是否需要删除");
          if (!flag) return alert("不删除");
          let res = await $.ajax({
            url: baseUrl + "/api/delBook/" + id,
            type: "delete",
          });
          console.log(res);
          if (res.status == 200) getBooks(); // 或者浏览器刷新 window.location.reload()
        });

        $(".btn").on("click", async function (e) {
          e.preventDefault();
          let name = $("#name").val();
          let author = $("#author").val();
          let des = $("#des").val();
          if (!name || !author || !des) return alert("请填写内容");
          let data = { name, author, des };
          let res = await $.ajax({
            url: baseUrl + "/api/addBook/",
            type: "post",
            data: data,
          });
          console.log(res);
          if (res.status == 200) {
            getBooks();
            clearCon();
          }
        });

        $("tbody").on("click", ".editBtn", async function () {
          if ($("#editBox")) $("#editBox").remove();
          let id = $(this).attr("dataid");
          let res = await $.ajax({
            url: baseUrl + "/api/book/" + id,
          });
          console.log(res.result[0]);
          let html = template("tmp1", res.result[0]);
          $("body").append(html);
        });

        $("body").on("click", ".editSub", async function (e) {
          e.preventDefault();
          let id = $(this).attr("dataid");
          let name = $(this).siblings("#editName").val();
          let author = $(this).siblings("#editAuthor").val();
          let des = $(this).siblings("#editDes").val();
          if (!name || !author || !des) return alert("请填写内容");
          let data = { id, name, author, des };
          let res = await $.ajax({
            url: baseUrl + "/api/updateBook/",
            type: "put",
            data: data,
          });
          console.log(res);
          if (res.status == 200) {
            $("#editBox").remove();
            getBooks();
            console.log('修改完成')
          } // 或者浏览器刷新 window.location.reload()
          if (res.status == 204) {
            alert("修改失败");
          }
        });
      });
    </script>
  </body>
</html>
